<template>
  <div class="wrapper" ref="wrapper">
    <div class="content" ref="content">
      <div class="item" v-for="item of cacheList" :key="item.id">
        <h1>{{ item.title }}</h1>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core'

export default {
  name: 'virtual-scroll',
  props: {
    list: { type: Array, default: () => [] },
    poolSize: { type: Number, default: 20 }
  },
  mounted () {

  },
  computed: {
    wrapper () {
      return this.$refs.wrapper
    },
    content () {
      return this.$refs.content
    },
    cacheList () {
      return this.list
    }
  },
  methods: {
    initScroll () {
      this.scroll = new BScroll(this.wrapper, {
        scrollX: false,
        scrollY: true,
        click: true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  overflow: hidden;
  width: 100%;
  height: 100%;

  .content {

    .item {
      box-sizing: border-box;
      height: 50px;
      padding: 10px;
      /* background-color: #ccc; */

      span {
        background-color: #ccc;
      }
    }
  }
}
</style>
